<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HIS hospital info</title>

    <link rel="stylesheet" type="text/css" href="../lib/jquery-easyui-1.4.2/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../lib/jquery-easyui-1.4.2/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../lib/jquery-easyui-1.4.2/demo/demo.css">
    <script type="text/javascript" src="../lib/jquery-easyui-1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="../lib/jquery-easyui-1.4.2/jquery.easyui.min.js"></script>

</head>
<body>

<div id="his_container" style="padding:10px;margin:10px;">
    <div id="his_container_left">
        11
    </div>
    <div id="his_container_right">
        22
    </div>
</div>

<div class="easyui-panel" title="Nested Panel" style="width:98%;height:200px;padding:10px;">
    <div class="easyui-layout" data-options="fit:true">
        <div data-options="region:'west',split:true" style="width:100px;padding:10px">
            Left Content
        </div>
        <div data-options="region:'east'" style="width:100px;padding:10px">
            Right Content
        </div>
        <div data-options="region:'center'" style="padding:10px">
            <div class="easyui-panel" style="width:98%;height:200px;padding:10px;" data-options="border:false">
                <div class="easyui-layout" data-options="fit:true">
                    <div data-options="region:'west'" style="width:50%;padding:10px">
                        Left Content
                    </div>
                    <div data-options="region:'center'" style="padding:10px">
                        Center Content
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="easyui-panel" style="width:98%;height:200px;padding:10px;" data-options="border:false">
    <div class="easyui-layout" data-options="fit:true">
        <div data-options="region:'west'" style="width:50%;padding:10px">
            Left Content
        </div>
        <div data-options="region:'center'" style="padding:10px">
            Center Content
        </div>
    </div>
</div>


<script type="text/javascript">


    $(function(){

        $('#his_container_left').css("float","left");
        $('#his_container_right').css("float","right");

        //如果不在document加载完后运行,会出现渲染异常...
        $('#his_container').panel({
            width: '100%',
            height: '400',
            title: 'My Panel',
            tools: [{
                iconCls: 'icon-add',
                handler: function () {
                    alert('new')
                }
            }, {
                iconCls: 'icon-save',
                handler: function () {
                    alert('save')
                }
            }]
        });

        $('#his_container_left').panel({
            width: '48%',
            height: '100%',
            title: 'left',
            tools: [{
                iconCls: 'icon-add',
                handler: function () {
                    alert('new')
                }
            }, {
                iconCls: 'icon-save',
                handler: function () {
                    alert('save')
                }
            }]
        });

        $('#his_container_right').panel({
            width: '48%',
            height: '100%',
            title: 'right',
            tools: [{
                iconCls: 'icon-add',
                handler: function () {
                    alert('new')
                }
            }, {
                iconCls: 'icon-save',
                handler: function () {
                    alert('save')
                }
            }]
        });


    });


</script>


</body>
</html>